<template>
    <div  style="display: flex;border-bottom: 1px solid gray;">
        <img src="../assets/mypic/dian.jpg" height="60px">
        <van-overlay v-for="item in Details" :key="item.doctor_id" :show="show" @click="show = false" style="overflow: scroll;">
            <div style="background-color: #e0ecfe;padding: 0 15px 5px">
                <div style="margin-top: 80px;display: flex;">
                    <img :src="item.doctor_avatar" style="border-radius: 50%;height:60px;">
                    <div style="margin: 15px 0;margin-left: 8px;">
                        <div>
                            <span style="font-size: 22px;font-weight: bolder;">{{item.doctor_name}}</span><span> {{item.doctor_titles}} | {{item.department_name}} </span>
                        </div>
                        <div>
                            <span>{{item.hospital_name}}</span>
                            <div style="background-color: #c27c1a;display: inline-block;color: white;padding: 1px;font-size: 13px;color: #50535a;">
                                <i class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                                <span style="display:inline-block;font-weight: bolder;color: aliceblue;">三甲</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div style="padding: 10px 15px;background-color: aliceblue;border-radius: 8px;font-size: 13px;color: #50535a;">
                        <div><span style="background-color: #2695fe;display: inline-block;color: white;">
                            <span style="display:inline-block;padding: 0 3px;">擅长</span>
                        </span><span style="line-height: 2;">{{ item.doctor_great }}</span></div>
                       <p ><div style="background-color: #2695fe;display: inline-block;color: white;">
                                <span style="display:inline-block;padding: 0 3px;">简介</span>
                            </div><span style="line-height: 2;">{{item.doctor_short}}</span></p> 
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <div style="padding: 10px 15px;background-color: aliceblue;box-sizing: content-box;border-radius: 8px;font-size: 12px;">
                        <p style="font-weight:bolder;padding: 12px 0;font-size: 16px;">患者评价</p>
                        <div v-for="item in rates" :key="item.rate_content">
                            <div style="display: flex;justify-content: space-between;margin: 3px 0;">
                                <p>用户****&nbsp;&nbsp;&nbsp;<van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon name="star" color="#fcb00f" /></p>
                                <span>2022-11-18</span>
                            </div>
                           <p style="line-height: 1.5;">{{ item.rate_content }}</p> 
                           <hr style="margin-top: 12px;">
                        </div>
                    </div>
                </div>
                <div style="margin:20px 0;">
                    <van-button type="primary" size="large" @click="router.push(`/consulting/${item.doctor_id}`)">图文咨询</van-button>
                </div>
            </div>
        </van-overlay>
    </div>
    <div @click="look(item.doctor_id)" v-for="item in Doctors" :key="item.doctor_id" style="display: flex;border-bottom: 1px solid gray;padding: 15px 0;">
        <div @click="show = true">
            <div style="display: flex;">
                <img :src="item.doctor_avatar" style="border-radius: 50%;width: 50px;height: 50px;">
                <div style="line-height: 1.5;font-size: 13px;">
                    <span style="font-weight: bold;font-size: 18px;">{{item.doctor_name}}</span>
                    <span style="margin-left: 5px;">{{item.doctor_titles}}&nbsp;|&nbsp;</span>
                    <span>{{item.department_name}}</span>
                    <div style="display: flex;">
                        <span style="font-size: 16px;">{{item.hospital_name}}</span>
                        <div style="background-color: darkorange;padding: 0 3px;margin-left: 5px;">
                            <i class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                            <span style="display:inline-block;color: aliceblue;">三甲</span>
                        </div>
                    </div>
                    <p>擅长:{{item.doctor_great}}</p>
                    <p>患者评分<span style="color: #0794f8;">4.8</span>&nbsp;&nbsp;质询量<span style="color: #0794f8;">1046</span>&nbsp;&nbsp;响应时间 <span style="color: #0794f8;">38分钟</span></p>
                    <p style="display: inline-block;padding: 1px 2px;background-color: burlywood;border-radius: 2px;color: #8f4f0d;">口碑医生</p>
                    <br>
                    <div style="margin: 15px 0;padding: 10px;display: inline-block;background-color: #f8f7ea;border-radius: 5px;font-weight: bolder;color: #828283;">
                        图文质询<span style="color:#1087db">￥30</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import Doctor from '@/type/Doctor';
import httpApi from '@/http'
const Doctors = reactive<Doctor[]>([])
const Details = reactive<any[]>([])
const rates = reactive<any[]>([])
const look =function(e:any){
    httpApi.DoctorApi.selectById({doctor_id:e}).then(res=>{
        console.log('加载的内容',res);
        Details.push(...res.data.data)
        console.log(Details);
    })
    httpApi.DoctorApi.selectRate({doctor_id:e}).then(res=>{
        rates.push(...res.data.data)
        console.log(rates);
    })
}
const router = useRouter()
const route = useRoute()
const d_id = route.params.d_id
console.log(d_id);

const show = ref(false);
onMounted(() => {
    let params = { department_id:d_id }
    httpApi.DoctorApi.selectDoctorByType(params).then(res=>{
        console.log('加载的内容',res);
        Doctors.splice(0,Doctors.length,...res.data.data)
        console.log('最后的结果', Doctors);
    })
    document.documentElement.scrollTop = 0
})

</script>
<style scoped lang="scss">
@import url('//at.alicdn.com/t/c/font_3903304_e3wrhqcw3ce.css');
p{
    margin: 0px;
}
i{
    &:before{
        font-size: 16px;
    }
}
</style>